<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="分析" name="first">
      <div class="container">
        <el-row :gutter="20">
          <el-col :span="12">
            <div id="echartsPV" ref="echartsPV" class="common-container"></div>
          </el-col>
          <el-col :span="12">
            <div id="echartsUV" ref="echartsUV" class="common-container"></div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div id="echartsRate" ref="echartsRate" class="common-container"></div>
          </el-col>
          <el-col :span="12">
            <div id="echartsNumOfPeople" ref="echartsNumOfPeople" class="common-container"></div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div id="echartsNumOfOrder" ref="echartsNumOfOrder" class="common-container"></div>
          </el-col>
        </el-row>
      </div>
    </el-tab-pane>
    <el-tab-pane label="二次营销分析" name="second">
      <div class="border">
        <el-form ref="form" :model="form" label-width="160px" label-position="right">
          <el-form-item label="当前参与用户：">
            <el-checkbox-group v-model="form.participate ">
              <el-checkbox label="已使用用户" name="participate "></el-checkbox>
              <el-checkbox label="未使用用户" name="participate "></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="用户标签选择：">
            <el-checkbox-group v-model="form.label">
              <el-checkbox label="新用户" name="label"></el-checkbox>
              <el-checkbox label="老用户" name="label"></el-checkbox>
              <el-checkbox label="活跃用户" name="label"></el-checkbox>
              <el-checkbox label="VIP会员" name="label"></el-checkbox>
              <el-checkbox label="金卡会员" name="label"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="性别选择：">
            <el-checkbox-group v-model="form.sex">
              <el-checkbox label="男" name="sex"></el-checkbox>
              <el-checkbox label="女" name="sex"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="年龄段选择：">
            <el-checkbox-group v-model="form.age">
              <el-checkbox label="10-15" name="age"></el-checkbox>
              <el-checkbox label="15-20" name="age"></el-checkbox>
              <el-checkbox label="20-25" name="age"></el-checkbox>
              <el-checkbox label="25-30" name="age"></el-checkbox>
              <el-checkbox label="30-35" name="age"></el-checkbox>
              <el-checkbox label="35-40" name="age"></el-checkbox>
              <el-checkbox label="40-45" name="age"></el-checkbox>
              <el-checkbox label="45-50" name="age"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="城市选择：">
            <el-checkbox-group v-model="form.city">
              <el-checkbox label="全国" name="city"></el-checkbox>
              <el-checkbox label="北京" name="city"></el-checkbox>
              <el-checkbox label="上海" name="city"></el-checkbox>
              <el-checkbox label="江苏" name="city"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="推送方式：">
            <el-checkbox-group v-model="form.way">
              <el-checkbox label="短信" name="way"></el-checkbox>
              <el-checkbox label="小程序" name="way"></el-checkbox>
              <el-checkbox label="网站" name="way"></el-checkbox>
              <el-checkbox label="H5" name="way"></el-checkbox>
              <el-checkbox label="邮件" name="way"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" prop="id" label="ID"></el-table-column>
          <el-table-column align="center" prop="name" label="活动名称"></el-table-column>
          <el-table-column align="center" prop="num" label="拼团人数"></el-table-column>
          <el-table-column align="center" prop="time" label="开始时间/结束时间"></el-table-column>
          <el-table-column align="center" prop="channel" label="活动渠道"></el-table-column>
          <el-table-column align="center" prop="status" label="状态"></el-table-column>
          <el-table-column align="center" prop="realNum" label="实际参与人数"></el-table-column>
          <el-table-column align="center" prop="cost" label="实际投入成本"></el-table-column>
          <el-table-column align="center" prop="amount" label="实际销售额"></el-table-column>
        </el-table>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
// import echarts from "echarts";
export default {
  mounted() {
    this.echartsPV();
    this.echartsUV();
    this.echartsRate();
    this.echartsNumOfPeople();
    this.echartsNumOfOrder();
  },
  data() {
    return {
      activeName: "first",
      form: {
        participate: [],
        label: [],
        sex: [],
        age: [],
        way: [],
        city: []
      },
      tableData: [
        {
          id: "100000",
          name: "进口奶粉促销",
          num: 6,
          time: "2020-02-02 10:00:10至2020-02-13 ",
          channel: "子平台",
          status: "未开始",
          realNum: 100,
          cost: 1000,
          amount: 10000
        }
      ]
    };
  },
  methods: {
    //PV
    echartsPV() {
      const echartsPV = this.$echarts.init(this.$refs.echartsPV);
      let option = {
        title: {
          text: "当天PV访问量"
        },
        toolbox: {
          feature: {
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          type: "category",
          data: [
            "0时",
            "2时",
            "4时",
            "6时",
            "8时",
            "10时",
            "12时",
            "14时",
            "16时",
            "18时",
            "20时",
            "22时",
            "24时"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      };
      echartsPV.setOption(option);
    },
    //UV
    echartsUV() {
      const echartsUV = this.$echarts.init(this.$refs.echartsUV);
      let option = {
        title: {
          text: "当天UV访问量"
        },
        toolbox: {
          feature: {
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          type: "category",
          data: [
            "0时",
            "2时",
            "4时",
            "6时",
            "8时",
            "10时",
            "12时",
            "14时",
            "16时",
            "18时",
            "20时",
            "22时",
            "24时"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      };
      echartsUV.setOption(option);
    },
    //成交转化率
    echartsRate() {
      const echartsRate = this.$echarts.init(this.$refs.echartsRate);
      let option = {
        title: {
          text: "当天成交转化率访问量"
        },
        toolbox: {
          feature: {
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          type: "category",
          data: [
            "0时",
            "2时",
            "4时",
            "6时",
            "8时",
            "10时",
            "12时",
            "14时",
            "16时",
            "18时",
            "20时",
            "22时",
            "24时"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      };
      echartsRate.setOption(option);
    },
    //成交人数
    echartsNumOfPeople() {
      const echartsNumOfPeople = this.$echarts.init(
        this.$refs.echartsNumOfPeople
      );
      let option = {
        title: {
          text: "当天成交人数访问量"
        },
        toolbox: {
          feature: {
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          type: "category",
          data: [
            "0时",
            "2时",
            "4时",
            "6时",
            "8时",
            "10时",
            "12时",
            "14时",
            "16时",
            "18时",
            "20时",
            "22时",
            "24时"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [100, 500, 1000, 1500, 2000, 2500, 3000],
            type: "line"
          }
        ]
      };
      echartsNumOfPeople.setOption(option);
    },
    //成交订单数
    echartsNumOfOrder() {
      const echartsNumOfOrder = this.$echarts.init(
        this.$refs.echartsNumOfOrder
      );
      let option = {
        title: {
          text: "当天成交订单数访问量"
        },
        toolbox: {
          feature: {
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          type: "category",
          data: [
            "0时",
            "2时",
            "4时",
            "6时",
            "8时",
            "10时",
            "12时",
            "14时",
            "16时",
            "18时",
            "20时",
            "22时",
            "24时"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      };
      echartsNumOfOrder.setOption(option);
    }
  }
};
</script>
<style scoped >
.common-container {
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #dee5e7;
  width: 100%;
  height: 500px;
  margin-top: 10px;
}
.border {
  width: 80%;
  margin: 0 auto 40px;
  padding: 40px;
  border: 1px solid #bbb;
}
/deep/.el-table thead {
  color: #666;
}
</style>